<!--分页器-->

<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <div class="pager-wrapper"
         :style="`
          text-align: ${component.compConfigData.pagerConfig.textAlign};
         `">
      <Page :current="component.compConfigData.pagerConfig.current"
            :page-size="component.compConfigData.pagerConfig.pageSize"
            :page-size-opts="component.compConfigData.pagerConfig.pageSizeOpts"
            :placement="component.compConfigData.pagerConfig.placement"
            :simple="component.compConfigData.pagerConfig.simple"
            :show-total="component.compConfigData.pagerConfig.showTotal"
            :show-elevator="component.compConfigData.pagerConfig.showElevator"
            :show-sizer="component.compConfigData.pagerConfig.showSizer"
            :prev-text="component.compConfigData.pagerConfig.prevText"
            :next-text="component.compConfigData.pagerConfig.nextText"
            :total="runCustomFilter(component.compConfigData.ds_resultObj)[0].totalCount"
            @on-change="onChangeHandler"/>
    </div>

  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'PagerComp', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin],
    attr: {
      version: '1.0',
      configDataTemp: Object.assign({

        pagerConfig: {
          textAlign: 'center',
          current: 1,
          pageSize: 10,
          pageSizeOpts: [10, 20, 30, 40],
          placement: 'bottom',
          simple: false,
          showTotal: false,
          showElevator: false,
          showSizer: false,
          prevText: '上一页',
          nextText: '下一页'
        },

        pagerScript: {
          onChangeScriptCode: ''
        }

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [
          {
            field: 'totalCount',
            remark: '总记录数'
          }
        ],
        ds_resultObj: [
          {
            "totalCount": 100
          }
        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
        ds_useTimer: false, // 是否开启定时器配置，默认不开启
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildFuncCompInteractionConfiguration([
        PnDesigner.buildFuncCompInteractionStreamItem('pageIndexChange',[
          PnDesigner.buildFuncCompInteractionFieldsMapItem('pageIndex', '', '当前页码'),
          PnDesigner.buildFuncCompInteractionFieldsMapItem('pageSize', '', '每页条数'),
          PnDesigner.buildFuncCompInteractionFieldsMapItem('totalCount', '', '总记录数'),
        ])
      ]))
    },
    data() {
      return {}
    },
    mounted() {
      this.init();

    },
    methods: {
      init () { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.runCustomGlobalJsCode()
        }, (result) => {
          this.runCustomGlobalJsCode()
        });
      },

      onChangeHandler (pageIndex) {
        let params = {
          pageIndex: pageIndex,
          pageSize: this.component.compConfigData.pagerConfig.pageSize,
          totalCount: this.runCustomFilter(this.component.compConfigData.ds_resultObj)[0].totalCount
        }
        this.$PnDesigner.launchInteractionStream(this.component.compConfigData, 'pageIndexChange', params)
        if (this.component.compConfigData.pagerScript.onChangeScriptCode) {
          eval(this.component.compConfigData.pagerScript.onChangeScriptCode)
        }
      }
    },
    computed: {}
  };

  export default _this
</script>

<style lang="less" scoped>
  .pager-wrapper {

  }
</style>
